import React, {
  useCallback,
  useContext,
  useEffect,
  useRef,
  useState
} from 'react'
import { createStyles } from 'antd-style'
import {
  UploadOutlined,
  CopyOutlined,
  DeleteOutlined,
  DownloadOutlined,
  EditOutlined,
  EllipsisOutlined,
  ShareAltOutlined,
  DragOutlined,
  PlusSquareOutlined
} from '@ant-design/icons'
import { UploaderContext } from '~/contexts'
import type { UploadProps } from 'antd'
import { Button, Input, message, Upload } from 'antd'
import { addFolder, uploadsFile } from '~/api/file'
import { useStoreSelector } from '~/store'
import Modal, { CustomModalHandles } from '../Modal'
import useIsMobile from '~/hooks/useIsMobile'
import { FileInfo, Folder, UserFile } from '~/types'
import FileUpload from '../FileUpload'
interface IconWithTextProps extends React.HTMLAttributes<HTMLDivElement> {
  icon: React.ReactNode
  children: React.ReactNode
  className?: string
}
interface FileOptionProps {
  getFileList: (folder: FileInfo) => void
  changeFile: (btnId: number) => void
}
const IconWithText = ({
  icon,
  children,
  className,
  ...props
}: IconWithTextProps) => {
  const isMobile = useIsMobile()
  return (
    <div
      className={className}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        gap: '0.25em'
      }}
      {...props}
    >
      <div style={{ transform: 'scale(0.75)' }}>{icon}</div>
      <div>{!isMobile ? children : ''}</div>
    </div>
  )
}

const FileOption: React.FC<FileOptionProps> = ({ getFileList, changeFile }) => {
  const { styles } = useStyles()
  const folder = useStoreSelector((state) => state.file.folder)

  const modalRef = useRef<CustomModalHandles>(null)
  const [folderName, setFolderName] = useState('')
  const handleFileChange = async (options: any) => {
    const { onSuccess, onError, file, onProgress } = options

    console.log('🚀 ~ handleFileChange ~ req:', folder)
    const { data } = await uploadsFile({
      ...folder,
      file: file
    })
    getFileList(folder)
    console.log('🚀 ~ handleFileChange ~ file:', data)
  }
  const showModal = () => {
    modalRef.current?.openModal()
  }
  const handleFileNew = async () => {
    if (folderName === '') return
    const { data } = await addFolder({
      ...folder,
      name: folderName
    })
    modalRef.current?.closeModal()
    getFileList(folder)
    console.log('🚀 ~ handleFileNew ~ data:', data)
  }
  // TODO: 若有选中任意文件/文件夹，则显示按钮组，否则显示上传按钮
  return (
    <div className={styles.container}>
      <div className={styles.buttonGroup}>
        <button className={styles.button} onClick={() => changeFile(1)}>
          <IconWithText icon={<ShareAltOutlined />}> 分享</IconWithText>
        </button>
        <button className={styles.button} onClick={() => changeFile(2)}>
          <IconWithText icon={<DownloadOutlined />}> 下载</IconWithText>
        </button>
        <button className={styles.button} onClick={() => changeFile(3)}>
          <IconWithText icon={<DragOutlined />}> 移动</IconWithText>
        </button>
        <button className={styles.button} onClick={() => changeFile(4)}>
          <IconWithText icon={<DeleteOutlined />}> 删除</IconWithText>
        </button>
      </div>
      <FileUpload
        userId={folder.userId}
        folderId={folder.folderId}
        changeFile={() => getFileList(folder)}
      >
        <IconWithText
          className={`${styles.button} mx-2`}
          icon={<UploadOutlined />}
        >
          上传
        </IconWithText>
      </FileUpload>
      <button className={styles.button}>
        <IconWithText icon={<PlusSquareOutlined />} onClick={showModal}>
          新建文件夹
        </IconWithText>
      </button>
      {/* <FileUpload userId={folder.userId} folderId={folder.folderId} /> */}
      <Modal ref={modalRef} title='新建文件夹' onConfirm={handleFileNew}>
        <Input
          placeholder='文件夹名称'
          value={folderName}
          onChange={(e) => setFolderName(e.target.value)}
        />
      </Modal>
    </div>
  )
}

export default FileOption

const useStyles = createStyles(({ token, css }) => {
  return {
    container: css`
      padding: 10px 10px;
    `,
    upload: css`
      margin: 0 20px;
      font-weight: ${token.fontWeightStrong};
    `,
    button: css`
      cursor: pointer;
      height: 32px;
      border: 1px solid transparent;
      border-radius: 32px;
      padding: 4px 15px;
      padding-inline-start: 16px;
      padding-inline-end: 16px;
      font-weight: ${token.fontWeightStrong};
      color: ${token.colorPrimary};
      background-color: ${token.colorPrimaryBorder};
    `,
    buttonGroup: css`
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      border-radius: 32px;
      margin-bottom: 10px;
      & button:last-child {
        &:after {
          display: none;
        }
      }
      & button {
        border-radius: 0;
        position: relative;
        &:after {
          z-index: 10;
          position: absolute;
          content: '';
          height: 50%;
          transform: translateY(50%);
          border-right: solid 1px ${token.colorPrimary};
          opacity: 0.33;
          top: 0;
          right: 0;
        }
      }
    `
  }
})
